<template>
  <div class="container">
    <view class="content">
      <view class="item">
        <view class="label fz16 bold">我是一个这样的人</view>
        <view class="tags flex">
          <view class="tag" :class="{active: oneselfTags.includes(tag.tagsName)}" @click="tagClick(tag.tagsName ,'oneselfTags')" v-for="tag in tags1" :key="tag.id">{{ tag.tagsName }}</view>
          <view class="tag" @click="addTag('oneselfTags')" v-if="!addTag1">您可以自定义标签+</view>
          <view v-else style="margin-bottom: 10px;">
            <uv-input fontSize="10" @blur="closeTag" @confirm="saveTag" border="none" class="addTagInput" :customStyle="addTagStyle" placeholder="请输入内容" v-model="tagParams.tagsName"></uv-input>
          </view>
        </view>

        <view class="textarea">
          <uv-textarea height="120px" :countStyle="countStyle" :customStyle="textareaStyle" border="none" v-model="valueDate.oneselfDescribe" placeholder="请输入内容" count maxlength="50"></uv-textarea>
          <view class="association" @click.stop="associationClick('oneselfTags')">
            <uv-button :loading="loading1" loadingSize="10" size="mini" :customStyle="associationStyle" text="智能联想" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
          </view>
        </view>
      </view>

      <view class="item">
        <view class="label fz16 bold">我希望你是一个这样的人</view>
        <view class="tags flex">
          <view class="tag" :class="{active: hisTags.includes(tag.tagsName)}" @click="tagClick(tag.tagsName ,'hisTags')" v-for="tag in tags2" :key="tag.id">{{ tag.tagsName }}</view>
          <view class="tag" @click="addTag('hisTags')" v-if="!addTag2">您可以自定义标签+</view>
          <view v-else style="margin-bottom: 10px;">
            <uv-input fontSize="10" @blur="closeTag" @confirm="saveTag" border="none" class="addTagInput" :customStyle="addTagStyle" placeholder="请输入内容" v-model="tagParams.tagsName"></uv-input>
          </view>
        </view>
        <view class="textarea">
          <uv-textarea height="120px" :countStyle="countStyle" :customStyle="textareaStyle" border="none" v-model="valueDate.hisDescribe" placeholder="请输入内容" count maxlength="50"></uv-textarea>
          <view class="association" @click.stop="associationClick('hisTags')">
            <uv-button :loading="loading2" loadingSize="10" size="mini" :customStyle="associationStyle" text="智能联想" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
          </view>
        </view>
      </view>
    </view>

    <view class="btn flex justifyCenter">
      <uv-button @click="next" :loading="loading" :customStyle="nextBtnStyle" text="进入瞬联" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let tags1 = ref([]);
let tags2 = ref([]);
let oneselfTags = ref([]);
let hisTags = ref([]);
let valueDate = ref({});
let loading1 = ref(false);
let loading2 = ref(false);
let loading = ref(false);
let tagParams = ref({
  tagsName: "",
  tagsType: null,
});
let addTag1 = ref(false);
let addTag2 = ref(false);

onShow(() => {
  uni.$on("setCompleteInfoData", (res) => {
    valueDate.value = res;
    console.log(res);
  });
  uni.$emit("sendCompleteInfoItem");
  init();
});

let addTagStyle = computed(() => {
  return {
    borderRadius: "12.5px",
    border: "1px solid #B0B0B0 !important",
    padding: "0 10px",
    height: "24px",
  };
});

let textareaStyle = computed(() => {
  return {
    border: "1px solid #B6A1FE",
  };
});

let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});

let associationStyle = computed(() => {
  return {
    boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
    borderRadius: "5px",
    padding: "0 12px",
    height: "26px",
  };
});

let countStyle = computed(() => {
  return {
    left: "5px",
  };
});

let init = async () => {
  tags1.value = await getTags(1);
  tags2.value = await getTags(2);
};

let closeTag = () => {
  if (tagParams.value.tagsType == 1) {
    addTag1.value = false;
  } else {
    addTag2.value = false;
  }
};

let saveTag = async () => {
  if (tagParams.value.tagsName.trim() == "")
    return proxy.$utils.showToast("标签不能为空");
  await proxy.$apis.setTags(tagParams.value);
  await init();
  proxy.$utils.showToast("标签保存成功");
};

//新增标签
let addTag = (tags) => {
  if (tags == "oneselfTags") {
    //设置标签类
    tagParams.value.tagsType = 1;
    addTag1.value = true;
  } else {
    tagParams.value.tagsType = 2;
    addTag2.value = true;
  }
};

let getTags = async (tagsType) => {
  let data = await proxy.$apis.getAllTags({ tagsType });
  return data;
};

let tagClick = (tagName, tags) => {
  let arr = [];
  if (tags == "oneselfTags") {
    arr = [...oneselfTags.value];
  } else {
    arr = [...hisTags.value];
  }
  if (arr.includes(tagName)) {
    let index = arr.indexOf(tagName);
    arr.splice(index, 1);
  } else {
    arr.push(tagName);
  }
  if (tags == "oneselfTags") {
    oneselfTags.value = [...arr];
  } else {
    hisTags.value = [...arr];
  }
};

let associationClick = async (type) => {
  try {
    let obj = {};
    if (type == "oneselfTags") {
      loading1.value = true;
      obj["tags"] = oneselfTags.value.toString();
      obj["type"] = 1;
      obj["sex"] = valueDate.value.sex == "MAN" ? 1 : 2;
    } else {
      loading2.value = true;
      obj["tags"] = hisTags.value.toString();
      obj["type"] = 2;
      obj["sex"] = valueDate.value.sex == "MAN" ? 2 : 1;
    }
    let data = await proxy.$apis.dashScope(obj);
    if (type == "oneselfTags") {
      valueDate.value.oneselfDescribe = data;
    } else {
      valueDate.value.hisDescribe = data;
    }
  } catch (error) {
  } finally {
    loading1.value = false;
    loading2.value = false;
  }
};

let next = async () => {
  try {
    loading.value = true;
    if (oneselfTags.value.length == 0)
      return proxy.$utils.showToast("请选择自我标签");
    if (hisTags.value.length == 0)
      return proxy.$utils.showToast("请选择期望对方的标签");
    if (!valueDate.value.oneselfDescribe)
      return proxy.$utils.showToast("请输入自我描述");
    if (!valueDate.value.hisDescribe)
      return proxy.$utils.showToast("请输入期望对方的描述");

    valueDate.value.oneselfTags = oneselfTags.value.toString();
    valueDate.value.hisTags = hisTags.value.toString();
    delete valueDate.value.avatarUrl;
    await proxy.$apis.loginReginfo(valueDate.value);
    proxy.$utils.showToast("提交成功");
    proxy.$utils.toLink("/pages/tabbar/tabbar-1/tabbar-1");
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>


<style lang="scss">
page {
  background-image: url("https://oss.seenlove.com/images/89776973c08626cce3d784901d81ca92.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
<style lang="scss" scoped>
.container {
  padding-bottom: 40px;
}
.active {
  background: linear-gradient(to right, #b2a1ff, #d3a7f9);
  border: 1px solid transparent;
  box-shadow: 0 2px 8px 2px rgba(182, 159, 254, 0.53);
  color: white !important;
}
.content {
  padding: 0 16px;
  padding-top: 30vw;
  .item {
    margin-bottom: 10px;
    .tags {
      flex-wrap: wrap;
      margin-top: 15px;
      .tag {
        font-size: 10px;
        color: #999999;
        padding: 5px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #999999;
        border-radius: 12.5px;
      }
    }
  }
  .textarea {
    position: relative;
    .association {
      display: inline-block;
      font-size: 10px;
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
}
.btn {
  margin-top: 17px;
}
::v-deep .addTagInput {
  .uv-input__content__field-wrapper__field {
    height: auto;
  }
}
</style>
